<template>
  <main class="spgl-wrap">
    <el-row :gutter="5" justify="end" align="middle">
      <el-col :span="10"></el-col>
      <el-col :span="14" style="display: flex; justifycontent: flex-end; alignitems: center">
        <el-button size="small" plain>近7天</el-button>
        <el-button size="small" plain>近30天</el-button>
        <el-button size="small" plain>近60天</el-button>
        <!-- <el-date-picker v-model="value1" type="date" placeholder="Pick a day" /> -->
        <div style="padding-left: 10px">
          <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="To" start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts" />
        </div>
      </el-col>
    </el-row>

    <div style="border-bottom: 1px solid #ccc">概览数据</div>

    <el-row :gutter="5">
      <el-col :span="8" style="text-align: center">
        <!-- 1 -->
        <p style="font-size: 12px; color: #ccc">进线客户数</p>
        <p style="font-size: 20px; margin: 0">3600人</p>
      </el-col>
      <el-col :span="8" style="text-align: center">
        <p style="font-size: 12px; color: #ccc">跟进客户数</p>
        <p style="font-size: 20px; margin: 0">3600人</p>
      </el-col>
      <el-col :span="8" style="text-align: center">
        <p style="font-size: 12px; color: #ccc">成交客户数</p>
        <p style="font-size: 20px; margin: 0">3600人</p>
      </el-col>
    </el-row>
    <div id="customerChart" :style="{ height: '300px' }"></div>
    <el-row>
      <el-col :span="24" :offset="22">
        <el-button type="primary" @click="onNewGoods" style="margin: 0 0 10px 15px">新建来源</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table v-if="tableData.length > 0" :data="tableData" style="width: 100%">
          <!-- 来源编号 -->
          <el-table-column prop="code" :label="$t('from.id')" width="130" align="center" />
          <!-- 来源类型 -->
          <el-table-column prop="type" :label="$t('from.type')" width="110" align="center">
            <!-- <template #default="scope">
              {{ useDict("product_type", scope.row.type) }}
            </template> -->
          </el-table-column>
          <!-- 一级来源名称 -->
          <el-table-column prop="subCount" :label="$t('from.firstName')" width="130" align="center" />
          <!-- 子来源数量 -->
          <el-table-column prop="id" :label="$t('from.childrenNum')" width="130" align="center" />
          <!-- 状态 -->
          <el-table-column prop="status" :label="$t('from.state')" width="130" align="center" />
          <!-- 创建人 -->
          <el-table-column prop="createUserName" :label="$t('from.creator')" width="130" align="center" />
          <!-- 创建时间 -->
          <el-table-column prop="createTime" :label="$t('from.createTime')" width="130" align="center" />

          <!-- 操作 -->
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button size="small" plain>编辑</el-button>
              <el-button size="small" plain @click="handleData(scope.$index, scope.row)">数据</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <!-- 分页 -->
        <el-pagination
          v-model:currentPage="pageControls.currentPage"
          v-model:page-size="pageControls.pageSize"
          :page-sizes="[5, 10, 20, 30]"
          :small="pageControls.small"
          :disabled="pageControls.disabled"
          :background="pageControls.background"
          layout="total,sizes , prev, pager, next,jumper"
          :total="pageControls.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <AddNoGoods v-model:dialogVisible="dialogVisible" @confirmHandle="updateTable"></AddNoGoods>
  </main>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref, watch, getCurrentInstance, inject } from "vue";
import { useRouter } from "vue-router";
import baseService from "@/service/baseService";
// import { useDict } from "@/hooks/useDict";
import AddNoGoods from "@/components/my/spgl/AddNoGoods.vue";
/*******************************日历相关 */
const value2 = ref("");

const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: "Last month",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: "Last 3 months",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];

/*******************************日历相关 */
// import { Timer } from '@element-plus/icons-vue'
interface IForm {
  title: string;
  isSell: number;
  type: number;
  grade: number;
  lessonType: number;
}
// 定义的搜素字段接口
interface IFormMy {
  id: string;
  name: string;
  state: number;
  creator: string;
  createTime: string;
}
// 定义的列表商品字段接口
// interface IGoods {
//   code: string;
//   createId?: number;
//   createTime: string;
//   grade: string;
//   id?: number;
//   isSell: number;
//   lessonForm: number;
//   lessonType: number;
//   payType: number;
//   price?: number;
//   status?: number;
//   title: string;
//   type: number;
// }
interface IListForm {
  code: string;
  createTime: string;
  createUserName: string;
  description: string;
  id: number;
  isValid: number;
  level: number;
  status: number;
  subCount: number;
  thirdCount: number;
  title: string;
  type: number;
  updateTime: string;
}
// 定义分页接口
interface IPage {
  currentPage: number;
  pageSize: number;
  small?: boolean;
  background?: boolean;
  disabled?: boolean;
  total?: number;
}
let dialogVisible = ref(false);
let tableData: IListForm[] = reactive([]); // 表格数据
let isUpdateTable = ref<boolean>(false); // 是否更新表格
const formInline: IForm = reactive({
  // 表单数据
  title: "",
  isSell: 0,
  type: 0,
  grade: 0,
  lessonType: 0
});
const formInlineMy: IFormMy = reactive({
  // 表单数据
  id: "",
  name: "",
  state: 1,
  creator: "",
  createTime: ""
});
// 表格分页
const pageControls = reactive<IPage>({
  currentPage: 1,
  pageSize: 5,
  small: false,
  background: true,
  disabled: false,
  total: 1
});

let echarts: any = inject("ec"); //引入echarts

onMounted(() => {
  let myChart = echarts.init(document.getElementById("customerChart"));
  const option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
      type: "value"
    },
    grid: {
      // 让图表占满容器
      top: "0px",
      left: "30px",
      right: "0px",
      bottom: "20px"
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line"
      }
    ]
  };
  myChart.setOption(option);
  window.onresize = function () {
    //自适应大小
    myChart.resize();
  };

  nextTick(() => {
    fetchGoodsList();
  });
});
// 监听表格是否需要进行更新
watch(
  () => isUpdateTable.value,
  () => {
    fetchGoodsList();
  }
);
// 添加完商品之后，需要重新表格
const updateTable = (isUpdate: boolean) => {
  isUpdateTable.value = isUpdate;
  isUpdate ? console.log("确认更新") : "";
};
const fetchGoodsList = async (
  param: { pageIndex: number; pageSize: number } = {
    pageIndex: pageControls.currentPage,
    pageSize: pageControls.pageSize
  }
) => {
  tableData.length = 0;
  // 商品列表获取
  const res = await baseService.post("/channel/list", param);
  if (res.code === 200) {
    // console.log(res.data.records)
    tableData.push(...res.data.records);
    pageControls.currentPage = Number(res?.data?.current);
    pageControls.pageSize = Number(res?.data?.size);
    pageControls.total = Number(res?.data?.total);
  } else {
    console.error("获取数据失败");
  }
  console.log(res, "商品管理");
};

// const handleEdit = (index: number, row: IGoods) => {
//   console.log(index, row);
// };
const $router = useRouter();
const handleData = (index: number, row: IListForm) => {
  console.log(index, row);

  $router.push({ name: "dataShow", query: { id: "10001" } });
};
// const handleDelete = (index: number, row: IGoods) => {
//   console.log(index, row);
// };
const onNewGoods = () => {
  // 新建商品
  console.log("submit!");
  dialogVisible.value = true;
};

// 数据查询
const searchTableData = async (param = Object.assign(formInline, { pageIndex: pageControls.currentPage, pageSize: pageControls.pageSize })) => {
  tableData.length = 0;
  // 商品列表获取
  const res = await baseService.post("/product/list", param);
  if (res.code === 200) {
    tableData.push(...res.data.records);
    pageControls.currentPage = Number(res?.data?.current);
    pageControls.pageSize = Number(res?.data?.size);
    pageControls.total = Number(res?.data?.total);
  } else {
    console.error("获取数据失败");
  }
  console.log(res, "商品管理");
};
// 表格分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageControls.pageSize = val;
  fetchGoodsList();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  pageControls.currentPage = val;
  fetchGoodsList();
};
</script>
<style lang="scss">
.spgl-wrap {
  .el-form-item {
    width: 80%;
    .el-select {
      width: 249px;
    }
  }
  .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
  }
  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }
}
</style>
